前言

前2天用了 Web版 Material Theme Builder，快速方便。
但想要看渲染過的元件長什麼樣的話就要到 Figma 版的 Material Theme Builder，今天讓我們來看看要怎麼把 Material Component 拿來用，並且快速染色吧！

Material Theme Builde

首先來介紹 Figma 版的Material Theme Builde，需要先Plugin。
Plugins > Find more plugins...

搜尋 Material Theme Builde

導入後就可以在專案空白的地方按下右鍵 > Plugins > Material Theme Builder

開啟後會有個APP視窗跑出來
我們先來看最右下小的齒輪，預設有勾選一些選項，讓你在換顏色的同時自動幫你生成一些東西，如果全開很吃效能，這邊我們先來試試看預設產出，之後把這邊的選項都關掉。

• Create color diagrams for new themes：建立新主題色時自動生成顏色盤（很耗效能）
• Pick colors with a HCT picker：選色時有調色盤
• Generate text styles (if not present)：自動生成文字格式
• Add legacy M2 type styles：自動生成 M2樣式
• Generate android color styles：自動生成Android顏色樣式
• Generate surface styles：自動生成surface顏色樣式
• Generate state layer styles：自動生成state layer顏色樣式
• Generate contrast for color pairs：自動生成text和surface顏色對比
• Update figma background color：連同figma 背景底色一同渲染

Theme Builder 視窗	設定選項

選色方法有3種

1. Dynamic 點選“色圈”調整顏色
2. 選擇 隨機跳 icon（這可以模擬使用者換主題色）
3. 把圖片拖進來，builder 會自動選色

Dynamic 可以直接選顏色，也可以隨機選色。顏色一改後面就會自動生成有勾選的項目。

方法1 調色盤	方法3 圖片

當然也可以客製化顏色，只要改變Primary 顏色就會獲得所有配色。當然左下角也可以匯出，這樣設計師也可以在熟悉的Figma匯出程式碼給工程師，減少開發時間和Key錯顏色的機會。

那如果想在Figma 上看顏色渲染到 M3 元間上要怎麼做呢？
首先點選 Design kit > Get a copy

Design kit	Get a copy

開啟專案
為了方便等下看到顏色渲染，可以先切到 Styles 頁面
在畫面中右鍵選擇 Plugins > 開啟 Material Theme Builder

記得先到右下角把設定自動產出的選項取消，才不會又生成多的顏色表。再來改變Primary顏色，就會自動套色了！

取消自動產出選項	選擇顏色

切到 Componet 頁面就可以看到渲染過的 Componet 囉！

把元件加入專案，染色！

在 Material Kit 裡複製需要的元件到專案中

複製進來的元件還沒有套上專案的顏色

1. 開啟 Material Theme Builder
2. 在左側欄位選取剛複製來的元件們
3. 當有選取component 時會多一個 SWAP button 按下他就可以渲染元件囉！

結論

今天學會了在 Figma 用 Theme Builder 快速產生 M3 Theme，M3 Components 套上顏色更有感覺了！

今日運動
深蹲
40kg 15 12 15
50kg 8 10 8
45kg 8 10 8

槓鈴肩推
15kg 15 10 8

核心
捲腹 30s
捲側腹 30s
爬式抬上身 30s
棒式抬膝 30s
棒式 60s